﻿@model IEnumerable<FinalProject.Models.Song>


@{
    ViewBag.Title = "Index";
}



@foreach (var item in Model) {
    
    <div class="divPostRow">
        <div class="divPost">
            <img class="postImg" />
            <div class="divPostInfo">
                <h1>@Html.DisplayFor(modelItem=>item.Title)</h1>
                <br/>
               Album: <a href="#">@Html.DisplayFor(modelItem=>item.Album)</a>
                <br/>
               Published on: <a href="#">@Html.DisplayFor(modelItem=>item.ReleseDate)</a>
                <br/>
               Artist: <a href="#">Not Yet</a>
            </div>
        </div>
            <div class="divRating">
                Avg Rating: have to caluculate
                <!-- we have to build it-->
                <div class="divRatingLabel">
                @{
                        var totalVotes = item.TotalRating_5 + item.TotalRating_4 + item.TotalRating_3 + item.TotalRating_2 + item.TotalRating_1;
                        var average = (5*item.TotalRating_5 + 4*item.TotalRating_4 + 3*item.TotalRating_3 + 2*item.TotalRating_2 + 1*item.TotalRating_1)/totalVotes;
                 }
                    @average from @totalVotes votes;
                </div>
            </div>
            <div class="divSocialInfo" >
                <div class="divYoutube">
                    <div class="g-ytsubcribe" data-channel=@item.YoutubeChannel data-layout="default" data-count="default"></div>
                </div>
                <div class="divFacebook">
                    <div class="fb-like" data-href=@item.FacebookLink data-layout="button_count" data-action="like" data-show-faces="false" data-share="false"></div>
                </div>
                <div class="divTwetter">
                    <a class="twitter-share-button" href=@item.TwetterLink data-via="Notepad_plus">Tweet</a>
                </div>
                <div class="divGoogle">
                    <div class="g-plusone"></div>
                </div>

            </div>
            <div class="divHiddenDetail">
               five stars: @item.TotalRating_5;
               <br/>four stars: @item.TotalRating_4;

                <br />Three stars: @item.TotalRating_3;

                <br />Two stars: @item.TotalRating_2;

                <br />One stars: @item.TotalRating_1;
                <br/>

                <input name="star2" type="radio" class="star" />
                <input name="star2" type="radio" class="star" />
                <input name="star2" type="radio" class="star" checked="checked" />
                <input name="star2" type="radio" class="star" />
                <input name="star2" type="radio" class="star" />


                @Html.ActionLink("Edit", "Edit", new { id=item.SongID }) |
                @Html.ActionLink("Details", "Details", new { id=item.SongID }) |
                @Html.ActionLink("Delete", "Delete", new { id=item.SongID })
            </div>
            <div class="divExpandDetail">⇊⇓⇊</div>
        </div>
   
}